import React, { Component } from 'react'
import { LeftOutline, AppstoreOutline, UnorderedListOutline, AlipaySquareFill } from 'antd-mobile-icons'
import { goodsList } from '@api'
import './index.scss'

export default class ItemList extends Component {
  state = {
    salesorder: true,
    priceorder: false,
    priceorderup: false,
    priceorderdown: true,
    neworder: false,
    orderBy: '',
    ItemList: [],
    changeStyle: true
  }
  render() {
    return (
      <div className='sc_item'>
        <div className='sc_ihead'>
          <div className="item-ihtop">
            <div className="back" onClick={() => this.props.history.go(-1)}>
              <LeftOutline />
            </div>
            <div className="gosearch" onClick={() => this.props.history.push('/search')}>
              <img src="https://m.ehaoyao.com/_nuxt/img/icon-search.0efa216.png" alt='' />搜索商品
            </div>
            <div className="changestyle" onClick={() => this.setState({ changeStyle: !this.state.changeStyle })}> {this.state.changeStyle ? <UnorderedListOutline /> : <AppstoreOutline />}</div>
          </div>
          <div className="item-orderby">
            <ul>
              <li onClick={this.salesorder} className={this.state.salesorder ? 'active' : ''}>销量</li>
              <li onClick={this.priceorder} className={this.state.priceorder ? 'active' : ''}>
                价格
                <div className="paixu">
                  <div className={this.state.priceorder ? this.state.priceorderup ? 'triangle-up active' : 'triangle-up' : 'triangle-up'} ></div>
                  <div className={this.state.priceorder ? this.state.priceorderdown ? 'triangle-down active' : 'triangle-down ' : 'triangle-down'} ></div>
                </div>
              </li>
              <li onClick={this.neworder} className={this.state.neworder ? 'active' : ''} >新品</li>
            </ul>
          </div>
        </div>
        <div className='itemlist'>
          <div className="style2">
            <div className="home-items">
              <div className="hi_container clearfix">
                {
                  this.state.changeStyle ?
                    <div className="style1">
                      {
                        this.state.ItemList.map(item => (
                          <div className="sy_c clearfix" key={item.id} onClick={() => this.goDetailpage(item.id)} >
                            <div className="sy_c_img">
                              <img src={item.pic} alt={item.name} />
                            </div>
                            <div className="sy_c_right">
                              <div className="sy_c_msg">
                                <div className="sy_c_msg_title">
                                  {item.name}
                                </div>
                                <div className="sy_c_msg_msg">
                                  {item.characteristic ? item.characteristic : '暂无描述'}
                                </div>
                              </div>
                              <div className="sy_c_shop clearfix">
                                <div className="price">￥ {item.minPrice}</div>
                                <div className="addcart">
                                  <AlipaySquareFill color='red' />
                                </div>
                              </div>
                            </div>
                          </div>
                        ))
                      }
                    </div>
                    :
                    <div className="style2">
                      <div className="home-items">
                        <div className="hi_container clearfix">
                          {
                            this.state.ItemList.map(item => (
                              <div className="ht_cc" key={item.id} onClick={() => this.goDetailpage(item.id)}>
                                <div className="ht_cc_img">
                                  <img src={item.pic} alt={item.name} />
                                </div>
                                <div className="ht_cc_msg">
                                  <p className="ht_cc_msg_title">{item.name}</p>
                                  <p className="ht_cc_msg_msg">
                                    {item.characteristic ? item.characteristic : '暂无描述'}
                                  </p>
                                </div>
                                <div className="ht_cc_shopping clearfix">
                                  <span className="price">￥ {item.minPrice}</span>
                                  <span className="add_cart" ><AlipaySquareFill color='red' /></span>
                                </div>
                              </div>
                            ))
                          }
                        </div>
                      </div>
                    </div>

                }
              </div>
            </div>
          </div >
        </div >
      </div >
    )
  }
  componentDidMount() {
    this.goodsList()
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  salesorder = async () => {
    await this.setState({
      salesorder: true,
      priceorder: false,
      neworder: false,
      priceorderup: false,
      priceorderdown: true,
    })
    if (this.state.salesorder === true) {
      this.setState({
        orderBy: 'ordersDown'
      })
      await this.goodsList()
    }
  }
  priceorder = async () => {
    await this.setState({
      salesorder: false,
      priceorder: true,
      priceorderup: !this.state.priceorderup,
      priceorderdown: !this.state.priceorderdown,
      neworder: false
    })
    if (this.state.priceorderup === true) {
      this.setState({
        orderBy: 'priceUp'
      })
      await this.goodsList()
    } else {
      this.setState({
        orderBy: 'priceDown'
      })
      await this.goodsList()
    }
  }
  neworder = async () => {
    await this.setState({
      salesorder: false,
      priceorder: false,
      priceorderup: false,
      priceorderdown: true,
      neworder: true
    })
    if (this.state.neworder === true) {
      this.setState({
        orderBy: 'addedDown'
      })
      await this.goodsList()
    }
  }
  goodsList = () => {
    goodsList({
      categoryId: this.props.match.params.id,
      orderBy: this.state.orderBy
    }).then((res) => {
      if (res.data.code === 0) {
        this.setState({
          ItemList: res.data.data.result
        })
      }
    })
  }
  goDetailpage = (value) => {
    this.props.history.push({ pathname: `/detail/${value}` })
  }
}
